<template>
	<div>
		<Form :label-width="80">
			<Row>
				<Col :xs="12" :sm="12" :md="12" :lg="12" :xl="12" :xxl="12">
				<FormItem class="w-50" label="设备名" prop="name">
					<Input v-model="asb.name" placeholder="请输入设备名"></Input>
				</FormItem>
				<!-- 提交封面文件 -->
				<FormItem class="" label="封面" prop="cover">
					<div>
						<img :src="asb.cover" />
					</div>
					<div class="p-2">
						<input @change="changeFile($event)" id="sbcover" class="d-none" type="file" />
						<label for="sbcover">
							<span class="btn btn-primary">选择文件</span>
						</label>
					</div>
					
				</FormItem>

				<FormItem class="" label="设备描述" prop="ms">
					<Input v-model="asb.ms" placeholder="请输入内容"></Input>
				</FormItem>
				<!-- 门店下拉框 -->
				<FormItem class="" label="所属门店" prop="storeid">
					<Select v-model="asb.storeid">
						<Option :key="key" :value="item.storeid" v-for="(item, key) in mds">{{item.name}}</Option>
					</Select>
				</FormItem>
				<!-- 房间下拉框 -->
				<FormItem class="" label="所属房间" prop="roomid">
					<Select v-model="asb.roomid" placeholder="请选择房间">
						<Option v-for="item in roomList" :key="item.value" :value="item.value">{{ item.label}}</Option>
					</Select>
				</FormItem>

				<FormItem class="" label="设备生产厂家" prop="roomid">
					<Input v-model="asb.cj" placeholder="请输入厂家名称"></Input>
				</FormItem>
				<FormItem class="" label="设备价值" prop="roomid">
					<Input v-model="asb.price" placeholder="请输入价格"></Input>
				</FormItem>
				<FormItem class="" label="购买日期" prop="roomid">
					<Row>
						<Col span="12">
						<DatePicker type="date" placeholder="Select date" style="width: 200px"></DatePicker>
						</Col>
					</Row>
					
				</FormItem>

				</Col>

			</Row>


			<FormItem class="text-right">
				<Button @click="submit" type="primary">保存</Button>
			</FormItem>
		</Form>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				asb: {
					sbid: "",
					name: "",//设备名称
					storeid:"",//门店id
					roomid: "",//房间id
					cover: "",//图片
					ms: "",
					
					cj: "", //设备生产厂家
					price: "", //设备价值
					buyday: "", //购买日期
				},
				roomList: [
                    {
                        value: '0001',
                        label: '飞虎'
                    },
					{
					    value: '0002',
					    label: '金牛'
					},
					{
					    value: '0003',
					    label: '金蟾'
					},
				],
				//门店数组
				mds:[] 
			}
		},
		
		created: function() {
			this.asb.sbid = this.$route.query.id;
			this.loadStore();
			this.loadData();
		},
		props: {
			params: {
				type: Object,
				default: undefined,
			}
		},
		
		methods: {
			//请求获取门店信息
			loadStore: function() {
				return this.http.get({
					url: "/md/all",
					param: {
						
					}
				}).then(data => {
					console.log(data);
					this.mds = data;
				});
			},
			
			loadData: function() {
				console.log(99999)
				return this.http.get({
					url: "/sb/info",
					param: {
						sbid: this.asb.sbid
					}
				}).then(res => {
					console.log(88888)
					console.log(res);
					this.asb = res;
				});
			},
			submit: function() {
				if (this.asb.name === "") {
					this.message.error("请输入设备名");
					return;
				}

				this.message.confirm({
					title: "保存提示",
					content: "即将修改设备，确定吗？",
					onOk: () => {
						this.http.put({
							url: "/sb/info",
							data: this.asb
						}).then(res => {
							this.message.info("修改成功");
							this.$tabs.close();
						});
					},
					onCancel: () => {
						this.message.info('操作已取消');
					}
				});
			},
			
			
			//请求图片
			changeFile: function(event) {
				console.log(event.target.files);
				if (event.target.files && event.target.files.length > 0) {
					this.loadFile(event.target.files[0]);
				}
			},
			loadFile: function(file) {
				const reader = new FileReader();
				reader.onload = e => {
					const content = e.target.result;
					// 处理文件内容
					// this.$emit("success", content);
					console.log(content);
					
					this.asb.cover = content;
				};
				reader.onerror = function(e) {
					console.error("读取文件时发生错误:", e.target.error);
				};
				//显示文件
				reader.readAsDataURL(file);
				
				
				//上传文件到服务器
				this.http.uploadFile({
					path: "/sb/cover/",
					file,
					onProgress: progressData => {
						console.log(progressData);
					}
				}).then(res => {
					console.log(res);
				});
				
			},
			
			
		},
		
	}
</script>

<style>
</style>